<template>
  <div>
    <div class="s">
      <el-button size="mini" class="listBTN newButtonColor" @click="openAddwin">新增厂家</el-button>
      <el-button size="mini" class="listBTN BatchDeleteColor" @click="remove">批量删除</el-button>
    </div>

    <div>
      <el-dialog
        title="新增厂家"
        :visible.sync="add"
        width="800px"
        class="yw"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        top="15vh"
        style="left: 140px"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small" class="qw">
          <el-row>
            <el-col :span="12">
              <el-form-item label="厂家名称" prop="factName">
                <el-input v-model.trim="form.factName" class="kz" placeholder="请输入厂家名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备分类" prop="kind">
                <el-select
                  size="mini"
                  @change="getDevTypeDict"
                  v-model="form.kind"
                  class="kz"
                  clearable
                >
                  <el-option
                    v-for="item in kindDict"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="设备类型" prop="factType">
                <el-select v-model="form.factType" placeholder="请选择类型" class="kz" clearable>
                  <el-option
                    v-for="item in typeDict"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区域" prop="regId">
                <el-cascader
                  v-model="form.regId"
                  :options="areas"
                  :props="props"
                  size="mini"
                  clearable
                  @change="handleChange"
                  class="kz"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="addr">
                <el-input v-model.trim="form.addr" class="kz" placeholder="请输入详细地址">
                  <el-button
                    slot="append"
                    @click="openMapsWin"
                    icon="el-icon-map-location"
                  />
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" prop="atten">
                <el-input v-model="form.atten" class="kz" placeholder="请输入联系人" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="tel" >
                <el-input
                  v-model="form.tel"
                  class="kz"
                  maxlength="11"
                  placeholder="请输入联系电话"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图片选择">
                <el-select
                  size="mini"
                  class="kz"
                  clearable
                  @change="chooseImage"
                  v-model="checkValue"
                >
                  <el-option
                    v-for="item in picUploadType"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-image
              class="kkz"
              :src="imageUrl"
              style="width: 105px; height: 105px;  border-radius:5px 5px 5px;"
              placeholder="暂无图片"
            ></el-image>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" class="xzcs2" clearable />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button size="small" class="editorBTN btnSpace bouncedHold" @click="addbg('form')">确定</el-button>
          <el-button size="small" @click="qux('form')" class="editorBTN cancelBTN">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="图片本地上传"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        top="30vh"
        @close="imgClose_loca"
        :modal="true"
        :visible.sync="uploadWin"
        width="880px"
        class="dialogClass"
      >
        <singleimageupload ref="singleimageupload" />
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="图片列表"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        @close="imgClose"
        top="20vh"
        :modal="true"
        :visible.sync="imagesWin"
        width="880px"
        class="dialogClass"
      >
        <picTable ref="picTable" />
      </el-dialog>
    </div>
    <div></div>
    <div>
      <mapseldialog @map-confirm="handleMapConfirm" ref="mapseldialog" />
    </div>
  </div>
</template>
<script>
import { getDict, DICTDATA } from "../../../../api/dict";
import { add, piliangDelete } from "../../../../api/system/production"; //添加,批量删除接口
import { findByParentId } from "../../../../api/system/dict";
import { getAreas } from "../../../../api/operation/pushButton";
import singleimageupload from "../../../../components/upload/singleimageupload";
import { fileid, picUrl } from "../../../../components/upload/picUpload";
import picTable from "../../../../components/pagetable/picTable";
import imgUrl from "../../../../assets/image/from图片.png";
import mapseldialog from "../../../../components/mapseldialog";

export default {
  data() {
  	var isMobileNumber= (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'))
        } else {
          const reg = /^(?:0[1-9][0-9]{1,2}-)?[2-8][0-9]{6,7}$/;
          const regs = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
          if (regs.test(value) || reg.test(value) ) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号或座机号'))
          }
        }
      };
  	var isName= (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'))
        } else {
          const reg = /^[\u4e00-\u9fa5]{2,6}$/;
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入2-6位中文字符'))
          }
        }
      };
    return {
      form: {
        factName: "",
        factType: "",
        kind: "",
        regId: "",
        addr: "",
        atten: "",
        tel: "",
        remark: "",
        picIds: "",
        longitude: "",
        latitude: "",
      },
      rules: {
        kind: [{ required: true, message: "分类不能为空", trigger: "blur" }],
        factType: [
          { required: true, message: "类型不能为空", trigger: "blur" },
        ],
        factName: [
          { required: true, message: "厂家名称不能为空", trigger: "blur" },
        ],
        regId: [
          { required: true, message: "所属区域不可为空", trigger: "blur" },
        ],
        addr: [
          { required: true, message: "详细地址不可为空", trigger: "blur" },
        ],
        atten: [{ required: true, message: "联系人不可为空", trigger: "blur" },
        { validator: isName, trigger: "blur" }
        ],
        tel: [
        { required: true, message: "联系电话不可为空", trigger: "blur" },
        { validator: isMobileNumber, trigger: "blur" }
        ],
        picId: [{ required: true, message: "请选取图片", trigger: "blur" }],
        remark: [{ required: false, message: "请选取图片", trigger: "blur" },
        {max: 50, message: '长度在不可超过50个字符', trigger: 'blur' }],
      },
      kindDict: [],
      typeDict: [],
      areas: [],
      props: {
      	checkStrictly: true,
        children: "children",
        label: "name",
        value: "id",
      },
      add: false,
      params: {
        value: "",
      },
      picUploadType: [
        {
          value: 1,
          name: "图片本地上传",
        },
        {
          value: 2,
          name: "图片库选择",
        },
      ],
      checkValue: "",
      checkModel: [],
      imageUrl: imgUrl,
      uploadWin: false,
      imagesWin: false,
      address: "",
    };
  },
  components: { singleimageupload, picTable, mapseldialog },
  created() {
    // 获取分类下拉框
    getDict(DICTDATA.DEV_KIND).then((res) => {
      this.kindDict = res;
    });
    // 获取区域
    this.queryRegTree(-1);
  },
  methods: {
  	imgClose(){
  		this.checkValue = "";
  		if (this.$refs.picTable.imageUrl) {
  			this.imageUrl = this.$refs.picTable.imageUrl;
  		}
  	},
  	imgClose_loca(){
  		this.checkValue = "";
  		if (this.$refs.singleimageupload.imageUrl) {
  			this.imageUrl = this.$refs.singleimageupload.imageUrl;
  		}
  	},
    openAddwin() {
      this.add = true;
      this.imageUrl = imgUrl;
      this.form = {
        factName: "",
        factType: "",
        kind: "",
        regId: "",
        addr: "",
        atten: "",
        tel: "",
        remark: "",
        picIds: "",
      };
      this.checkValue = "";
    },
    // 多级联动选择器选中事件
    handleChange(value) {
//    this.form.regId = value[value.length - 1];
    },
    /**
     * 根据设备分类，查询设备类型下拉框
     */
    getDevTypeDict() {
      this.params.value = this.form.kind;
      findByParentId(this.params).then((res) => {
        this.typeDict = res.data;
      });
    },
    //地区数据查询，翻译使用
    queryRegTree(id) {
      return new Promise((resolve, reject) => {
        getAreas(id).then((res) => {

          this.areas = this.getTreeData(res.data.children);
          resolve();
        });
      });
    },
    // 递归算法
    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    // 输入框点击事件
    openMapsWin() {
      this.$refs.mapseldialog.open({
        lng: this.form.longitude,
        lat: this.form.latitude,
      });
    },
    handleMapConfirm(addres) {
      this.form.addr =
        addres.province + addres.city + addres.district + addres.addr;
    },
    // 下拉框点击事件,不同的选择跳不同的页面
    chooseImage() {
      this.fileList = [];
      if (this.checkModel.length != 0) {
        this.checkModel = [];
      }
      if (this.checkValue == 1) {
        this.uploadWin = true;
      } else {
        this.uploadWin = false;
      }
      if (this.checkValue == 2) {
        this.imagesWin = true;
      } else {
        this.imagesWin = false;
      }
    },
    addbg(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.imageUrl == imgUrl) {
          	this.form.picIds = "";
          }else{
          	this.form.picIds = this.imageUrl;
          }
          this.form.regId = this.form.regId[this.form.regId.length - 1];
          add(this.form)
            .then((res) => {
            	if(res.code == "000000"){
            		this.$message({
	                message: "添加成功",
	                type: "success",
	              });
	              this.add = false;
	              this.$parent.getDataInit();
	              this.form = {};
            	} else {
            		this.$message.error(res.data);
            	}
            })
            .catch((err) => {
              this.$message.error("添加失败");
            });
        } else {

          return false;
        }
      });
    },
    qux(formName) {
      this.$refs[formName].resetFields();
      this.form = {};
      this.add = false;
    },
    remove() {
      let arr = [];
      if (this.$parent.getMultipleSelection().length === 0) {
        this.$message({
          message: "请至少选择一条数据!",
          type: "warning",
        });
        return false;
      }
      this.$parent.getMultipleSelection().forEach((item) => {
        arr.push(item.id);
      });
      this.$confirm("确认删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "messagebox-button",
		cancelButtonClass: "messagebox-button"
      }).then(() => {
        piliangDelete(arr)
          .then((res) => {
            if (res.data && res.code === "000000") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.$parent.getDataInit();
            }
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tel-width {
  width: 800px;
}
.kkz {
  margin-right: 450px;
}
//按钮
.aniu {
  width: 120px;
}

.xan {
  width: 200px;
  margin-top: 5px;
  margin-right: 30px;
  margin-left: 30px;
}

.s {
  padding: 10px 20px 0;
}

// 二级
.qw {
  width: 1000px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-left: 25px;
}
.bz {
  width: 175px;
}

.dw {
  margin-right: 125px;
  display: flex;
}

.dw span {
  margin-top: 8px;
  margin-left: 5px;
}

.dw1 {
  padding-right: 4px;
}

.ntd {
  width: 200px;
  margin-right: 50px;
}

.ntx {
  width: 200px;
}

.kz {
  width: 200px;
  margin-right: 120px;
}

.dq {
  width: 90px;
}

.ww {
  margin-right: 42px;
}

.tup {
  width: 105px;
  height: 102px;
}

.xzcs2 {
  width: 600px;
}

// 图片
.tp {
  width: 800px;
  // display: flex;
}

.ws {
  width: 70px;
  height: 70px;
}

.tpsc {
  display: flex;
}

.ani {
  margin-top: 40px;
  margin-right: 10px;
  font-size: 12px;
}

.tpscwz {
  margin-top: 40px;
  color: red;
  font-size: 12px;
}
</style>

